<template>
  <div class="container">
    <Breadcrumb>
      <BreadcrumbItem to="/user/setting?type=setting">{{$t('user.accountSetting')}}</BreadcrumbItem>
      <BreadcrumbItem>{{$t('user.changePassword')}}</BreadcrumbItem>
    </Breadcrumb>
    <div class="title">{{$t('user.changePassword')}}</div>
    <Row>
      <Col span="8">
        <Form ref="form" label-position="top" :model="form" :rules="ruleValidate">
          <FormItem :label="$t('user.LoginPassword')" prop="oldPassword">
            <Input v-model="form.oldPassword" type="password" password :placeholder="$t('user.enterLoginPassword')"></Input>
          </FormItem>
          <FormItem :label="$t('user.newLogin')" prop="newPassword">
            <Input v-model="form.newPassword" type="password" password :placeholder="$t('user.enterNewLoginPassword')"></Input>
          </FormItem>
          <FormItem :label="$t('user.confirmPassword')" prop="cNewPassword">
            <Input v-model="form.cNewPassword" type="password" password :placeholder="$t('user.pleaseConfirmNewPassword')"></Input>
          </FormItem>
          <FormItem :label="$t('user.verificationEmail')" v-if="false" prop="name">
            <div class="div-input">
              <Input size="large" v-model="form.emailCode" :placeholder="$t('user.emailVerificationCode')">
                <Button v-if="num >= 60" @click="sendCode" :loading="codeLoading" class="btn-code" size="large" slot="append">
                  {{$t('user.getVerificationCode')}}
                </Button>
                <Button v-else class="btn-code" size="large" slot="append">
                  {{num}} S
                </Button>
              </Input>
            </div>
          </FormItem>
          <Button class="btn" :loading="loading" @click="onUpdateLoginPassword" type="primary" size="large" long>
            {{$t('user.change')}}
          </Button>
        </Form>
      </Col>
    </Row>
  </div>
</template>

<script>
import {logout, sendCodeByEmail, updateLoginPassword} from "@/api/user";

export default {
  name: "index",
  data() {
    return {
      num: 60,
      timer: '',
      loading: false,
      codeLoading: false,
      form: {
        oldPassword: '', // 旧密码
        newPassword: '', // 新密码
        cNewPassword: '', // 确认新密码
      },
      ruleValidate: {
        oldPassword: [
          {required: true, message: this.$t('user.enterLoginPassword'), trigger: 'blur'}
        ],
        newPassword: [
          {required: true, message: this.$t('user.enterNewLoginPassword'), trigger: 'blur'}
        ],
        cNewPassword: [
          {required: true, message: this.$t('user.pleaseConfirmNewPassword'), trigger: 'blur'}
        ],
      }
    }
  },
  methods: {
    onUpdateLoginPassword() {
      // 修改密码
      if (this.form.newPassword != this.form.cNewPassword) {
        this.$Message.error(this.$t('user.twoNewPasswordsMatch'));
        return false;
      }
      this.loading = true;
      updateLoginPassword(this.form).then((res)=>{
        this.$Message.success(this.$t('user.passwordChangedSuccessfully'));
        this.loading = false;
        this.onLogout();
      }).catch(()=>{
        this.loading = false;
      })
    },
    onLogout() {
      // 退出登录
      logout().then(()=>{
        this.$store.commit('resetUserInfo');
        this.$router.push('/');
      })
    },
    sendCode() {
      // 发送验证码
      if(this.timer) {
        clearInterval(this.timer);
        this.timer = '';
      }
      this.codeLoading = true;
      sendCodeByEmail({
        email: this.form.email,
        type: 0
      }).then((res)=>{
        this.codeLoading = false;
        this.countdown();
      }).catch(()=>{
        this.codeLoading = false;
      })
    },
    countdown() {
      // 倒计时
      this.timer = setInterval(()=>{
        if (this.num <= 0) {
          clearInterval(this.timer);
          this.timer = '';
          this.num = 60;
        } else {
          this.num = this.num - 1;
        }
      }, 1000)
    }
  }
}
</script>

<style scoped lang="less">
.container {
  .title {
    margin-top: 24px;
    margin-bottom: 24px;
    color: @t-title-color;
    font-weight: 600;
    font-size: 26px;
  }
  .btn-code {
    font-size: 14px;
  }

}
</style>